<!doctype html>
<html>
<head>

  <title>annotations</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">

</head>
<body>


<dom-module id="x-inside">
  <style>
    :host {
      display: inline-block;
      border: var(--border) solid orange;
      height: 10px;
      width: 10px;
      background-color: tomato;
    }
  </style>
  <template>
    
  </template>
  <script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-inside'
    });
  });  
  </script>
</dom-module>


<dom-module id="dne-property">
  <style>
    :host {
      display: block;
    }

    x-inside {
      color: var(--dne);
      --border: 10px;
    }
  </style>
  <template>
    <x-inside id="inner"></x-inside>
  </template>
  <script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'dne-property'
    });
  });
  </script>
</dom-module>

<dne-property></dne-property>  
<dne-property></dne-property>  
<dne-property></dne-property>  

</body>
</html>
